import React, { Component } from 'react'
import { connect } from 'dva'
import LoginForm from './LoginForm'
import Submit from './LoginSubmit'
import styles from './Login.less'

import bg from './images/login_bg.png'

@connect(({login, loading}) => ({
  login,
  submitting: loading.effects['login/login'],
}))
export default class LoginPage extends Component {
  handleSubmit = (err, values) => {
    const {dispatch} = this.props
    if (!err) {
      dispatch({
        type: 'login/login',
        payload: {
          ...values
        },
      })
    }
  }

  render() {
    const {submitting} = this.props
    return (
      <div className={styles.main}>
        <div className={styles.left}>
          <LoginForm onSubmit={this.handleSubmit}>
            <Submit loading={submitting}>登录</Submit>
          </LoginForm>
        </div>
        <div className={styles.right}>
          <img alt='登陆背景' src={bg} className={styles.bg} />
        </div>
      </div>
    )
  }
}
